<style lang="less" scoped>
    .top_t{
        position: absolute;
        left: 0;
        top: -1000rem;
    }
    .on_b{
        padding: 0 0.72rem;
        button{
            padding: 0.25rem 0;
        }
    }
    .header.active{
        padding-top: 0;
        height: 0.88rem;
        position: relative;
    }
    .main_allScroll{
        overflow-y: hidden;
    }
    .on_b{
        button{
            padding: 0;
            height:0.8rem;
        }
    }
</style>
<template>
    <div>
        <v-header title="商家实名认证" type="/my/business">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
            <!--<div slot="right" class="lordfontColor" v-on:click="sava">保存</div>-->
        </v-header>
        <div class="main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <group style="margin-top: 0" class="verified">
                <cell title="手机号实名认证" is-link @click.native="telClick" style="height:1.2rem;">
                </cell>
                <cell title="银行卡实名"  is-link @click.native="openbank" style="height:1.2rem;">
                </cell>
            </group>
            <div class="tip" style="margin-top: 0.1rem;font-size: 0.24rem;color: #63676a;padding-left: 0.24rem;">
                <div class="warning_icon"></div>
                <span>商家实名认证需手机号实名或银行卡实名</span>
            </div>
        </div>
        <div class="mask_t" v-if="isbank" v-on:click="clickMask">
            <div class="mask_t_b" :class="isan?'active':''">
                <div class="mask_t_b_t">选择实名银行卡：</div>
                <div class="mask_t_b_c">
                    <checklist label-position="left" required :options="commonList" :max="1" v-model="radioValue"></checklist>
                </div>
                <div class="on_b">
                    <button class="btns buttonBR" :class="disabledTwo !== ''?'disabled':''" :disabled="disabledTwo !== ''" v-on:click="next(1)">下一步</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { Cell,Group,Checklist} from 'vux'
    import { mapActions,mapState } from 'vuex'
    import {ISVERIFIED} from 'store/user'
    export default {
        components: {
            Cell,
            Group,
            Checklist
        },
        data() {
            return {
                commonList: [],
                radioValue: [],
                date:{},
                disabled:'disabled',
                disabledTwo:'disabled',
                isTel:false,
                isbank:false,
                isClick :false,
                isTimeEnd:false,
                clickText:"获取验证码",
                disInputs:[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],
                isan:false,
                focusState:false

            };
        },
        activated:function () {
                this.commonList= [],
                this.radioValue= [],
                this.date={},
                this.disabled='disabled',
                this.disabledTwo='disabled',
                this.isTel=false,
                this.isbank=false,
                this.isClick =false,
                this.isTimeEnd=false,
                this.clickText="获取验证码",
                this.disInputs=[{value:''},{value:''},{value:''},{value:''},{value:''},{value:''}],
                this.isan=false,
                this.focusState=false
            /*if(this.user.authentication === 0){
             this.$router.push({path:"/my/verified"})
             }*/
        },
        methods:{
            ...mapActions([ISVERIFIED]),
            //银行卡验证
            auth_bankcard_info(){
                this.$ajax.business.authBankcardInfo({bankcardId:this.radioValue[0]})
                    .then((res)=>{
                        if(res.body.content == false){
                            this.$vux.toast.text('验证失败', 'middle')
                        }else{
                            this.ISVERIFIED({type:'authenticationState',str:1});
                            this.$router.push({path:"/my/business/businessLicense"});
                        }
                    })
            },

            //获取银行列表
            getBankCardList(){
                let that = this;
                this.$ajax.BANK.queryBankcardsInfo()
                    .then((res)=>{
                        let arr = res.body.content;
                        arr.push(
                            {bankcardId: 'xmstq', bankcardNo: "添加银行卡",bankName: ''}
                        )
                        arr.map((v,i)=>{
                            console.log(v)
                            v.key = v.bankcardId;
                            if(v.bankName){
                                v.value =  v.bankName + '(' + (v.bankcardNo + '').replace(/\*/g, '') + ')';
                            } else {
                                v.value =  v.bankcardNo
                            }

                            if(i == 0 && arr.leng > 1){
                                this.radioValue = [v.bankcardId];
                            }
                        })

                        this.commonList = arr;
                        setTimeout(function () {
                            that.isbank = true;
                        })
                        setTimeout(function () {
                            that.isan = true
                        },50)
                    })
            },
            clickMask(e){   //点击遮罩隐藏遮罩
                if(e.target.className == "mask_t"){
                    this.closebank();
                }
            },
            closebank(){  //关闭银行卡认证弹框
                this.isan = false
                setTimeout(function () {
                    this.isbank = false;
                }.bind(this))
            },
            openbank(){  //打开银行卡认证弹窗
                this.getBankCardList();
            },
            telClick(){  //点击手机号认证

                this.$ajax.business.authMobileInfo()
                    .then((res)=>{
                        this.ISVERIFIED({type:'authenticationState',str:1});
                        this.$router.replace({path:"/my/business/businessLicense",query:{}});
                    })
            },
            next(type){
                if(type == 1){
                    this.auth_bankcard_info();
                }
            }
        },
        watch:{
            radioValue:function () {
                if(this.radioValue[0]){
                    this.disabledTwo = '';
                }
                if(this.radioValue[0] =='xmstq'){
                    this.$router.push({
                        path:'/my/addBankCard'
                    })
                }
            }
        },
        computed: mapState({user:state=>state.user,interactive:state => state.interactive}),
    }
</script>